<template>
  <van-card
      v-for="user in prop.userList"
      :desc="user.profile"
      :title="user.username"
      :tag="user.gender == 0 ? '男' : '女'"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag
          plain
          type="primary"
          v-for="tag in JSON.parse(user.tags)"
          style="margin-right: 8px;margin-bottom: 8px"
      >
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="doLinkMe(user)">联系我</van-button>
    </template>
  </van-card>

</template>

<script setup lang="ts">

import {showToast} from "vant";

interface userCardListProps{
  userList:API.User[]
}

const prop = withDefaults(defineProps<userCardListProps>(),{
  userList: []
})

const doLinkMe = (user) => {
  showToast(`联系电话:${user.phone}`)
}
</script>

<style scoped>

</style>